<template>
  <div class="collet">
    <h2>我的收藏</h2>
    <el-row>
      <el-col :span="8" v-for="(item, i) in data" :key="i">
        <el-card>
          <img :src="item.big_pic" />
          <div style="padding: 14px">
            <div>
              <img
                src="../assets/money.png"
                alt=""
                style="width: 20px; vertical-align: middle"
              />
              <span style="padding: 5px 0">:{{ item.gprice }}万元</span>
            </div>
            <div>
              <img
                src="../assets/car.png"
                alt=""
                style="width: 20px; vertical-align: middle"
              />
              <span style="padding: 5px 0">:{{ item.title }}</span>
            </div>

            <el-button-group>
              <el-button type="info" size="mini" plain @click="details"
                ><i class="el-icon-search"></i>详情</el-button
              >
              <el-button type="info" size="mini" plain @click="pk"
                ><i class="el-icon-trophy"></i>对比</el-button
              >
            </el-button-group>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="block">
      <el-button-group>
        <el-button
          type="info"
          size="mini"
          plain
          @click="getPageGo(-1)"
          :disabled="isActive"
          >上一页</el-button
        >
        <el-button type="info" size="mini" plain @click="getPageGo(1)"
          >下一页</el-button
        >
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone:'',
      data: null,
      page: 1,
    };
  },
  mounted() {
    this.save()
    this.getPageList();
  },
  methods: {
    save(){
      this.phone=sessionStorage.getItem('phone');
    },
    details(){
      this.$router.push("/details")
    },
    pk(){
      this.$router.push("/compare")
    },
    //根据请求数据与后台交互
    getPageList() {
      this.axios
        .get(`/collect?phone=${this.phone}&page=${this.page}`)
        .then((res) => {
          this.data = res.data.data;
          this.code = res.data;
        });
    },
    //点击上一页和下一页
    getPageGo(index) {
      this.page = this.page + index;
      this.getPageList();
    },
  },
  computed: {
    //当页码数到第一页时，上一页按钮禁用
    isActive() {
      if (this.page > 1) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
h2 {
  padding: 10px 0;
  text-align: left;
}
.block {
  .el-button-group {
    position: relative;
    left: 40%;
    bottom: 0;
    
  }
}
.el-col {
  .el-card {
    margin: 10px;
    font-size: 0.9em;
    img {
      width: 100%;
    }
  }
  .el-card:hover {
    box-shadow: -1px -1px 7px 4px #afadad;
  }
}
</style>
